<template>
  <div class="c-ph24 c-pt40 c-pb30 c-bd-b1" v-if="themeName == 'mb5'">
    <div class="c-flex-row c-aligni-center">
      <span class="c-fs30">{{liveName}}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{liveDesc}}</span>
      <span class="c-fs20 c-fc-gray" @click="clickMoreLive">更多</span>
    </div>
    <div @click="clickGoLiveDetail(item.lpId)" class="c-pt30 c-flex-row" :key="index" v-for="(item,index) in liveList">
      <div class="c-ww240 c-maxh160 c-text-hidden c-p c-br10">
        <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.cover, require('../../assets/defult270.png'))" alt=""/>
        <vip-status :item="item"></vip-status>
      </div>
      <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column">
        <div class="c-fs22 c-text-ellipsis2 c-lh36">{{item.name}}</div>
        <div class="c-flex-row c-aligni-center c-justify-sb">
          <div class="theme-fc c-flex-row c-lh c-aligni-end" :class="[1, 3].includes(item.payType) ? 'c-fs20 c-pt20' : 'c-fs24 c-pt40'"><span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 180)}}</div>
          <div v-if="item.liveStatus == 1" class="c-fs20 status-color">直播中</div>
        </div>
      </div>
    </div>
  </div>
  <div class="c-ph24 c-bd-b12-f5" v-else-if="themeName == 'mb4'">
    <div class="c-pt40 c-flex-row c-aligni-center">
      <span class="c-fs30 c-p c-lh c-pl20"><span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>{{liveName}}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{liveDesc}}</span>
      <span class="c-fs20 c-fc-gray c-pl8" @click="clickMoreLive">查看更多</span>
    </div>

    <div class="c-flex-row c-flexw-wrap c-justify-sb c-pb30">
      <div v-for="(item,index) in liveList" :key="index" class="c-ww288 c-pt30" @click="clickGoLiveDetail(item.lpId)">
        <div class="c-ww288 c-maxh192 c-br10 c-text-hidden c-p">
          <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.cover, require('../../assets/defult270.png'))" alt=""/>
          <vip-status :item="item"></vip-status>
        </div>
        <div class="c-fs24 c-pt12 c-text-ellipsis2">{{item.name}}</div>
        <div class="c-flex-row c-aligni-center c-pt16">
          <div v-if="item.liveStatus == 1" class="c-fs20 status-color c-flex-grow1">直播中</div>
          <div class="theme-fc c-flex-row c-lh c-aligni-end" :class="[1, 3].includes(item.payType) ? 'c-fs22' : 'c-fs24'"><span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 180)}}</div>
        </div>
      </div>
    </div>
  </div>
  <div v-else-if="themeName == 'mb3'">
    <index-three-title-com :titleName="liveName" :titleDesc="liveDesc" @clickMore="clickMoreLive"></index-three-title-com>
    <div class="c-ph24 c-pb20 c-bd-b12-f5">
      <div @click="clickGoLiveDetail(item.lpId)" class="c-pt24 c-flex-row":key="index" v-for="(item,index) in liveList">
        <div class="c-pb24">
          <div class="c-ww210 c-maxh210  c-text-hidden c-p c-br10">
            <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.cover, require('../../assets/defult270.png'))" alt=""/>
            <vip-status :item="item"></vip-status>
          </div>
        </div>
        <div class="c-ml20 c-w0 c-flex-grow1 c-flex-column c-justify-sb c-pb24" :class="index == liveList.length - 1 ? '':'c-bd-b1'">
          <div class="c-fs24 c-text-ellipsis2 c-lh36">{{item.name}}</div>
          <div class="c-flex-row c-aligni-center c-justify-sb">
            <div class="theme-fc c-w0 c-flex-grow1" :class="[1, 3].includes(item.payType) ? 'c-fs22' : 'c-fs24'"><span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 180)}}</div>
            <div class="c-flex-row  c-aligni-center c-pt12 c-fs20 status-color" v-if="item.liveStatus == 1">直播中</div>
          </div>
        </div>
      </div>
    </div>

  </div>

  <div class="c-ph24 c-pt24 c-pb20 c-mt12 c-bg-white" v-else-if="themeName == 'mb6'">
    <div class="c-flex-row c-aligni-end c-mb10">
      <span class="c-fs28 c-fw-b">{{liveName}}</span>
      <span class="c-fs20 c-fc-gray c-mb2 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{liveDesc}}</span>
      <span class="c-fs18 c-fc-gray" @click="clickMoreLive">更多直播</span>
    </div>
    <div @click="clickGoLiveDetail(item.lpId)" class="c-pt24 c-flex-row " :key="index" v-for="(item,index) in liveList">
      <div class="c-pb24">
        <div class="c-ww160 c-maxh106 c-text-hidden c-br10 c-p">
          <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.cover, require('../../assets/defult270.png'))" alt=""/>
          <vip-status :item="item"></vip-status>
        </div>
      </div>
      <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb c-pb24" :class="index == liveList.length - 1 ? '' : 'c-bd-b1'">
        <div class="c-fs24 c-text-ellipsis2 c-lh36 c-fw-b">{{item.name}}</div>
        <div class="c-flex-row c-aligni-end">
          <div v-if="item.liveStatus == 1" class="c-fs20 status-color c-flex-grow1">直播中</div>
          <div class="theme-fc c-lh" :class="[1, 3].includes(item.payType) ? 'c-fs22' : 'c-fs24'"><span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 180)}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import indexThreeTitleCom from "@/components/templates/common/indexThreeTitleCom.vue";
import vipStatus from '@/components/templates/common/vipStatus.vue'
import { utilJs } from "@/utils/common.js"
export default {
  name: "indexpersonalliveCom",
  components: {
    indexThreeTitleCom,
    vipStatus,
  },
  props: {
    liveName: {
      type: String,
      default: '直播间',
    },
    liveDesc: {
      type: String,
      default: '直播间',
    },
    liveList: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      statusMap: {
        0: "未在直播",
        1: "正在直播",
        // 2: "回放",
        // 3: "直播已结束"
      },
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      themeName: localStorage.getItem("themeName")
        ? localStorage.getItem("themeName")
        : "mb5",
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0,
      pageTextColor: sessionStorage.getItem('pageTextColor') || '',
    };
  },
  methods: {
    clickMore() {
      this.$emit('clickMore');
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    clickMoreLive() {
      let toPath = `/homePage/live/livePersonalList`;
      this.iosAppRouteChange(toPath);
    },
    clickGoLiveDetail(liveId) {
      let toPath = `/homePage/live/livePersonalDetail?liveId=${liveId}`;
      this.iosAppRouteChange(toPath);
    }
  }
};
</script>

<style scoped lang="scss">
@function pxToRem($px) {
  //$rpx为需要转换的字号
  @return $px/40 + rem;
}
.status-color {
  color: #409eff;
}
.vipStatus {
  position: absolute;
  top: 0;
  left: 0;
  /* width: 2.5rem;
  height: 2.5rem; */
  width: 1.5rem;
  height: 1.5rem;
}
.mb4_default .theme-bd-r2 {
  border-right: 2px solid #ff300c;
}
.status-btn{
  height: pxToRem(28);
  line-height:pxToRem(28);
  border-radius: pxToRem(15);
}
.pillar{
  width: 1px;
  margin: 0 1px;
  height: pxToRem(4);
  background: #fff;
  border-radius: 5px;
  animation: pillarDance 2s infinite  ease;
}
.pillar:first-child{
  animation-delay:0.5s;
}
.pillar:nth-child(2){
  animation-delay:1s;
}
.pillar:nth-child(3){
  animation-delay:1.5s;
}
.status-1 {
  background: linear-gradient(90deg, #30b656, rgba(48, 182, 86, 0.7));
}
@-webkit-keyframes pillarDance{
    0%{height:pxToRem(4);}
    50%{height:pxToRem(16);}
    100%{height:pxToRem(4);}
}
</style>
